<template>
    <div class="login-container">
        <div class="login-content">
            <div class="login-content-left"></div>
            <div class="login-content-right">
                <div class="login-content-right-title"></div>
                <div class="login-content-right-second-title">账号密码登录</div>
                <div class="login-content-right-form">
                    <el-form ref="form" :model="form">
                        <el-form-item label="账号：" style="text-align: left;" label-width="55px">
                            <el-input v-model="form.username" style="margin-bottom: 20px;" placeholder="请输入账号"></el-input>
                        </el-form-item>
                        <el-form-item label="密码：" style="text-align: left;" label-width="55px">
                            <el-input v-model="form.password" style="margin-bottom: 20px;" show-password
                                placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item style="text-align: left;" label-width="0">
                            <el-button type="primary" @click="onSubmit" style="width: 100%;"
                                @keyup.enter="keyDown">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="login-content-right-footer">
                    <div>
                        <span>帮助</span>
                        <span>隐私条款</span>
                        <!-- <span>条款</span> -->
                    </div>
                    <div>copyright © 2024 欢乐斗地组 体验技术部出品</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.login-container {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

.login-content {
    width: 75%;
    height: 70%;
    margin: 0 auto;
    /* background-color: aliceblue; */
    transform: translateY(20%);
    position: relative;
    /* border-radius: 10px; */
    display: flex;
    border: #d2d1d1 solid 1px;
}

.login-content-left {
    height: 100%;
    width: 70%;
    background: url(../../assets/login-img.png) no-repeat #d6e0fc;
    background-size: contain;
    background-position: center;
    /* border-radius: 10px; */
}

.login-content-right {
    width: 30%;
    height: 100%;
    position: relative;
    border-left: #d2d1d1 solid 1px;
}

.login-content-right-title {
    margin: 15px auto;
    font-size: xx-large;
    height: 110px;
    background: url(../../assets/logo无背景.png) no-repeat;
    background-size: contain;
}

.login-content-right-second-title {
    height: 30px;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 15px;
    color: #6290ff;
    border-bottom: #6290ff solid 2px;
    /* background-color: #fff; */
}

.login-content-right-form {
    width: 90%;
    margin: 0 auto;
}

.login-content-right-footer {
    position: absolute;
    bottom: 10px;
    width: 90%;
    margin: 0 5%;
    height: 50px;
    /* background-color: #fff; */
}

.login-content-right-footer>div {
    font-size: 13px;
    color: #8d8d8d;
    margin-bottom: 5px;
}

.login-content-right-footer>div>span {
    margin: 0 10px;
}
</style>

<script>
import { jwtDecode } from 'jwt-decode';
import CryptoJS from 'crypto-js/crypto-js.js';
import { userLogin } from '../../api/user';
// import { userLogin1 } from '../../api/user';

export default {
    name: "LoginView",
    data() {
        return {
            form: {
                username: '',
                password: ''
            },
            userCriteria: null,
            loginData: {
                loginUserId: null,
                loginUserPassword: null,
            },
            // loginData: {
            //     userId: null,
            //     userPassword: null
            // }
        }
    },
    methods: {
        encrypt(plaintText) {
            const CRYPTOJSKEY = "keyhlddz";
            var plaintText1 = plaintText;
            var options = {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.Pkcs7
            };
            var key = CryptoJS.enc.Utf8.parse(CRYPTOJSKEY);
            var encryptedData = CryptoJS.AES.encrypt(plaintText1, key, options);
            var encryptedBase64Str = encryptedData.toString().replace(/\//g, "_");
            encryptedBase64Str = encryptedBase64Str.replace(/\+/g, "-");
            return encryptedBase64Str;
        },
        onSubmit() {
            this.loginData.loginUserId = this.form.username;
            this.loginData.loginUserPassword = this.encrypt(this.form.password);
            // this.loginData.userId = this.form.username
            // this.loginData.userPassword = this.encrypt(this.form.password);
            // console.log(this.loginData.loginUserPassword)
            // userLogin1(this.loginData)
            userLogin(this.loginData.loginUserId, this.loginData.loginUserPassword)
                .then(res => {
                    if (res.data.code === '0') {
                        this.$message({
                            message: res.data.msg,
                            duration: 2000,
                            showClose: true,
                            type: 'success'
                        });
                        localStorage.setItem('token', res.data.data);
                        this.loginData = jwtDecode(res.data.data);
                        // console.log(this.loginData);
                        // console.log(this.loginData.userId);
                        // console.log(this.loginData.userRoles[0].userRole);
                        // console.log(JSON.stringify(this.loginData.userRoles));
                        // console.log(JSON.parse(JSON.stringify(this.loginData.userRoles)));
                        localStorage.setItem('userId', this.loginData.userId);
                        localStorage.setItem('userName', this.loginData.userName);
                        localStorage.setItem('userRoles', JSON.stringify(this.loginData.userRoles));
                        localStorage.setItem('currentRole', this.loginData.userRoles[0].userRole);

                        this.$router.replace('/Home');
                    }
                    else {
                        this.$message.error(res.data.msg);
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        keyDown(e) {
            //如果是回车则执行登录方法
            if (e.keyCode == 13) {
                //需要执行的登录方法
                this.onSubmit();
            }
        },
    },
    mounted() {
        //绑定事件
        window.addEventListener('keydown', this.keyDown);
    },
    //销毁事件
    destroyed() {
        window.removeEventListener('keydown', this.keyDown, false);
    }
}
</script>